<style scoped lang="scss">
.left-main-box {
  width: 100%;
  height: 100%;
  position: relative;
  //background-color: #409EFF;
  //background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  background-image: linear-gradient(to top, #b3ffab 0%, #12fff7 100%);
  //background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
  //background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .header{
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 10;
    .img {
      height: 40px;
      width: auto;
      margin-right: 10px;
    }
    .title {
      font-weight: 500;
      font-size: 1.25rem;
    }
  }
  .img {
    //width: 150px;
    //height: 150px;
  }
  .title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 15px;
  }
  .description {
    font-size: 1rem;
    font-weight: 400;
  }
}
</style>

<template>
  <div class="left-main-box">
    <div class="header">
      <el-image class="img" :src="leftTopLogo" />
      <span class="title">GoFrame-vue-element-admin</span>
    </div>
    <el-image class="img" :src="centerBackgroundImage" />
    <span class="title">企业级大型中后台管理系统</span>
    <span class="description">工程化、高性能、跨组件库的前后端处理方案</span>
  </div>
</template>

<script>
export default {
  name: 'Background',
  data() {
    return {
      leftTopLogo: require('@/assets/image/logo.png'),
      centerBackgroundImage: require('@/assets/image/login-background.png')
    }
  }
}
</script>
